<template>
    <div>
        <div class="conta_main">
            <div style="display: flex;align-items: baseline;"><h4>指标对比分析</h4><span class="score_tag">说明：列表中各“差值”列的数值，鼠标点击后可查看对比数值。</span></div>
            <!-- :cell-style="cellStyle" -->
            <el-table
                :data="props.dataList['analyList'] && props.dataList['analyList']['classList']" border highlight-current-row
                @sort-change="sortChange($event, props.dataList['analyList'] && props.dataList['analyList']['classList'],'table1', 1)" :height="400" 
                class="table student-down-table tabs table1 tablePadding" ref="table1" show-summary :summary-method="getSummaries1"
                :header-cell-style="{background: '#f1f1f1', color: '#333',borderColor: 'rgb(193 193 193)'}">
                <el-table-column label="班级名称" prop="className" width="130" align="center" header-align="center" fixed>
                    <template #default="scope">
                        <el-button type="text" @click="toClassKanban(scope.row)" class="idAddName">{{scope.row.className}}</el-button>   
                    </template>
                </el-table-column>
                <el-table-column label="科目" prop="subjectName" width="90" align="center" header-align="center" fixed></el-table-column>
                <el-table-column label="授课教师" prop="teacherName" width="90" align="center" header-align="center" fixed></el-table-column>
                <el-table-column label="两次均参考人数" width="80" prop="bothNum" align="right" header-align="center" fixed :sort-orders="['ascending', 'descending']" sortable="column">
                    <template #default="scope">
                        <span @click="stuComDetails(scope.row, 'stuComDetails')" style="cursor: pointer;"
                            :class="{'minus-number':String(scope.row['bothNum']).replace('%','')<0, 'positive-number': String(scope.row['bothNum']).replace('%','')>=0}">
                            {{scope.row['bothNum']}}
                        </span>
                    </template>
                </el-table-column>
                <template v-for="(itemColumn, itemIndex) in columnList" :key="itemIndex">
                    <template v-if="searchForms.grades=='a17'">
                        <el-table-column :label="itemColumn.label" prop="" align="center" header-align="center" :key="itemIndex+'a'">
                            <template v-for="(item,index) in itemColumn['list']" :key="index">
                                <el-table-column v-if="item.prop=='ysAvg' && item.isShow" :width="item.width" :min-width="item.width ? '' : 92" :label="item.label" :prop="item.prop" align="right" header-align="center" :key="index+'b'">
                                    <template #header="scope">                                                                
                                        <div @click="defaultSort = (defaultSort=='null' ? true : !defaultSort)" class="pointer-btn">
                                            <!-- <prompt-message tipType="middle" :scope="scope" :dataList="dataList" :middle="c.abProp+'Middle'" :many="c.abProp+'Many'"> -->
                                                <!-- <span slot="columnName"> -->
                                                    <span>{{scope.column.label}}</span>
                                                    <span class="caret-wrapper">
                                                        <!-- 升序 -->
                                                        <i class="sort-caret ascending" :class="{'default-sort': (defaultSort && defaultSort !='null')}"></i>
                                                        <!-- 降序 -->
                                                        <i class="sort-caret descending" :class="{'default-sort': !defaultSort && defaultSort != 'null'}"></i>
                                                    </span>
                                                <!-- </span>  -->
                                            <!-- </prompt-message> -->
                                        </div>                               
                                    </template> 
                                    <template #default="scope">
                                        <el-popover teleported trigger="click" v-if="item.color" popper-class="row_popover">
                                            <template #reference>
                                                <span style="cursor: pointer;" :class="{'minus-number':String(scope.row[item.prop]).replace('%','')<0, 'positive-number': String(scope.row[item.prop]).replace('%','')>=0}">{{scope.row[item.prop]}}</span>
                                            </template>
                                            <div>
                                                <ul class="name-tip">
                                                    <li class="r-name"><span class="nine-line-title">{{scope.row.className}}</span>：<span class="line-header-title">{{item.label.slice(0,-2)=='偏差' ? '偏差（平均值）': item.label.slice(0,-2)}}</span></li>
                                                    <li class="r-name" v-for="(dbitem, dbindex) in scope.row[item.prop + 'Db']" :key="dbindex"><span class="nine-line-title">{{dbitem.name}}</span>：<span class="line-header-title">{{dbitem.score}}</span></li>
                                                </ul>
                                            </div>
                                        </el-popover>
                                        <span v-else>{{scope.row[item.prop]}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-if="item.prop!='ysAvg' && item.isShow" :label="item.label" :width="item.width" :min-width="item.width ? '' : 92" :prop="item.prop" align="right" header-align="center" :key="index+'b'" :sortable="item['sortable'] ? item['sortable']: false" :sort-orders="item['sortOrder']">
                                    <template #default="scope">
                                        <el-popover teleported trigger="click" v-if="item.color" popper-class="row_popover">
                                            <template #reference>
                                                <span style="cursor: pointer;" :class="{'minus-number':String(scope.row[item.prop]).replace('%','')<0, 'positive-number': String(scope.row[item.prop]).replace('%','')>=0}">{{scope.row[item.prop]}}</span>
                                            </template>
                                            <div>
                                                <ul class="name-tip">
                                                    <li class="r-name"><span class="nine-line-title">{{scope.row.className}}</span>：<span class="line-header-title">{{item.label.slice(0,-2)=='偏差' ? '偏差（平均值）': item.label.slice(0,-2)}}</span></li>
                                                    <li class="r-name" v-for="(dbitem, dbindex) in scope.row[item.prop + 'Db']" :key="dbindex"><span class="nine-line-title">{{dbitem.name}}</span>：<span class="line-header-title">{{dbitem.score}}</span></li>
                                                </ul>
                                            </div>
                                        </el-popover>
                                        <span v-else>{{scope.row[item.prop]}}</span>
                                    </template>
                                </el-table-column>
                            </template>
                        </el-table-column>
                    </template>
                    <!-- 不是高三，不分原始分 -->
                    <template v-else>
                        <el-table-column :label="itemColumn.label" prop="" align="center" header-align="center" :key="itemIndex+'a'">
                            <template v-for="(item,index) in itemColumn['list']" :key="index">
                                <el-table-column v-if="item.prop=='ysAvg'" :label="item.label" :prop="item.prop" align="right" header-align="center" :key="index+'b'">
                                    <template #header="scope">                                                                
                                        <div @click="defaultSort = (defaultSort=='null' ? true : !defaultSort)" class="pointer-btn">
                                            <!-- <prompt-message tipType="middle" :scope="scope" :dataList="dataList" :middle="c.abProp+'Middle'" :many="c.abProp+'Many'"> -->
                                                <!-- <span slot="columnName"> -->
                                                    <span>{{scope.column.label}}</span>
                                                    <span class="caret-wrapper">
                                                        <!-- 升序 -->
                                                        <i class="sort-caret ascending" :class="{'default-sort': (defaultSort && defaultSort !='null')}"></i>
                                                        <!-- 降序 -->
                                                        <i class="sort-caret descending" :class="{'default-sort': !defaultSort && defaultSort != 'null'}"></i>
                                                    </span>
                                                <!-- </span>  -->
                                            <!-- </prompt-message> -->
                                        </div>                               
                                    </template> 
                                    <template #default="scope">
                                        <el-popover teleported trigger="click" v-if="item.color" popper-class="row_popover">
                                            <span style="cursor: pointer;" :class="{'minus-number':String(scope.row[item.prop]).replace('%','')<0, 'positive-number': String(scope.row[item.prop]).replace('%','')>=0}">{{scope.row[item.prop]}}</span>
                                            <div>
                                                <ul class="name-tip">
                                                    <li class="r-name"><span class="nine-line-title">{{scope.row.className}}</span>：<span class="line-header-title">{{item.label.slice(0,-2)}}</span></li>
                                                    <li class="r-name" v-for="(dbitem, dbindex) in scope.row[item.prop + 'Db']" :key="dbindex">
                                                        <span class="nine-line-title">{{dbitem.name}}</span>：<span class="line-header-title">{{dbitem.score}}</span></li>
                                                </ul>
                                            </div>
                                        </el-popover>
                                        <span v-else>{{scope.row[item.prop]}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column v-else :label="item.label" :prop="item.prop" align="right" header-align="center" :key="index+'b'" :sortable="item['sortable'] ? item['sortable']: false" :sort-orders="item['sortOrder']">
                                    <template #default="scope">
                                        <el-popover teleported trigger="click" v-if="item.color" popper-class="row_popover">
                                            <span style="cursor: pointer;" :class="{'minus-number':String(scope.row[item.prop]).replace('%','')<0, 'positive-number': String(scope.row[item.prop]).replace('%','')>=0}">{{scope.row[item.prop]}}</span>
                                            <div>
                                                <ul class="name-tip">
                                                    <li class="r-name"><span class="nine-line-title">{{scope.row.className}}</span>：<span class="line-header-title">{{item.label.slice(0,-2)}}</span></li>
                                                    <li class="r-name" v-for="(dbitem, dbindex) in scope.row[item.prop + 'Db']" :key="dbindex">
                                                        <span class="nine-line-title">{{dbitem.name}}</span>：<span class="line-header-title">{{dbitem.score}}</span></li>
                                                </ul>
                                            </div>
                                        </el-popover>
                                        <span v-else>{{scope.row[item.prop]}}</span>
                                    </template>
                                </el-table-column>
                            </template>
                        </el-table-column>
                    </template>                    
                </template>
            </el-table>

            
            <div style="display: flex;align-items: baseline;"><h4>进步率分析</h4></div>
            <el-table
                :data="props.dataList['progressRate']&&props.dataList['progressRate']['classList']" border highlight-current-row
                @sort-change="sortChange($event, props.dataList['progressRate'] && props.dataList['progressRate']['classList'], 'table2',2)" :height="400" 
                class="table2 table student-down-table tabs tablePadding" ref="table2" show-summary :summary-method="getSummaries2"
                :header-cell-style="{background: '#f1f1f1', color: '#333',borderColor: 'rgb(193 193 193)'}">
                <el-table-column label="班级名称" prop="className" :key="1" align="center" width="130" header-align="center" fixed>
                    <template #default="scope">
                        <el-button type="text" @click="toClassKanban(scope.row)" class="idAddName">{{scope.row.className}}</el-button>   
                    </template>
                </el-table-column>
                <el-table-column label="科目" prop="subjectName" width="90" :key="2" align="center" header-align="center" fixed></el-table-column>
                <el-table-column label="授课教师" prop="teacherName" width="90" :key="3" align="center" header-align="center" fixed></el-table-column>
                <el-table-column label="两次均参考人数" width="80" prop="bothNum" :key="4" align="right" header-align="center" fixed :sort-orders="['ascending', 'descending']" sortable="column">
                    <template #default="scope">
                        <span @click="stuComDetails(scope.row, 'stuComDetails')" style="cursor: pointer;"
                            :class="{'minus-number':String(scope.row['bothNum']).replace('%','')<0, 'positive-number': String(scope.row['bothNum']).replace('%','')>=0}">
                            {{scope.row['bothNum']}}
                        </span>
                    </template>
                </el-table-column>
                <template v-if="searchForms.grades=='a17'">
                    <el-table-column label="原始分" prop="" align="center" :key="5" header-align="center">
                        <el-table-column label="城区百分比进步人数" width="100" prop="ysProgressNum" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column">
                            <template #default="scope">
                                <span @click="stuComDetails(scope.row, 'stepStuDetails', 0, 0)" style="cursor: pointer;"
                                    :class="{'minus-number':String(scope.row['ysProgressNum']).replace('%','')<0, 'positive-number': String(scope.row['ysProgressNum']).replace('%','')>=0}">
                                    {{scope.row['ysProgressNum']}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="城区百分比退步人数" width="100" prop="ysFallNum" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column">
                            <template #default="scope">
                                <span @click="stuComDetails(scope.row, 'stepStuDetails', 1, 0)" style="cursor: pointer;"
                                    :class="{'minus-number':String(scope.row['ysFallNum']).replace('%','')<0, 'positive-number': String(scope.row['ysFallNum']).replace('%','')>=0}">
                                    {{scope.row['ysFallNum']}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="城区百分比进步率" width="80" prop="ysProgressRate" align="right" header-align="center">
                            <template #header="scope">                                                                
                                <div @click="defaultSort1 = (defaultSort1=='null' ? true : !defaultSort1)" class="pointer-btn">
                                    <!-- <prompt-message tipType="middle" :scope="scope" :dataList="dataList" :middle="c.abProp+'Middle'" :many="c.abProp+'Many'"> -->
                                        <!-- <span slot="columnName"> -->
                                            <span>{{scope.column.label}}</span>
                                            <span class="caret-wrapper">
                                                <!-- 升序 -->
                                                <i class="sort-caret ascending" :class="{'default-sort': (defaultSort1 && defaultSort1 !='null')}"></i>
                                                <!-- 降序 -->
                                                <i class="sort-caret descending" :class="{'default-sort': !defaultSort1 && defaultSort1 != 'null'}"></i>
                                            </span>
                                        <!-- </span>  -->
                                    <!-- </prompt-message> -->
                                </div>                               
                            </template> 
                        </el-table-column>
                        <el-table-column label="城区百分比退步率" width="80" prop="ysFallRate" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column"></el-table-column>
                    </el-table-column>
                    <el-table-column label="等级分" prop="" align="center" :key="6" header-align="center">
                        <el-table-column label="城区百分比进步人数" width="100" prop="djfProgressNum" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column">
                            <template #default="scope">
                                <span @click="stuComDetails(scope.row, 'stepStuDetails', 0, 1)" style="cursor: pointer;"
                                    :class="{'minus-number':String(scope.row['djfProgressNum']).replace('%','')<0, 'positive-number': String(scope.row['djfProgressNum']).replace('%','')>=0}">
                                    {{scope.row['djfProgressNum']}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="城区百分比退步人数" width="100" prop="djfFallNum" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column">
                            <template #default="scope">
                                <span @click="stuComDetails(scope.row, 'stepStuDetails', 1, 1)" style="cursor: pointer;"
                                    :class="{'minus-number':String(scope.row['djfFallNum']).replace('%','')<0, 'positive-number': String(scope.row['djfFallNum']).replace('%','')>=0}">
                                    {{scope.row['djfFallNum']}}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="城区百分比进步率" width="80" prop="djfProgressRate" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column"></el-table-column>
                        <el-table-column label="城区百分比退步率" width="80" prop="djfFallRate" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column"></el-table-column>
                    </el-table-column>
                </template>
                <template v-else>
                    <el-table-column label="城区百分比进步人数" width="100" prop="ysProgressNum" :key="7" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column">
                        <template #default="scope">
                            <span @click="stuComDetails(scope.row, 'stepStuDetails', 0, 0)" style="cursor: pointer;"
                                :class="{'minus-number':String(scope.row['ysProgressNum']).replace('%','')<0, 'positive-number': String(scope.row['ysProgressNum']).replace('%','')>=0}">
                                {{scope.row['ysProgressNum']}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="城区百分比退步人数" width="100" prop="ysFallNum" :key="8" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column">
                        <template #default="scope">
                            <span @click="stuComDetails(scope.row, 'stepStuDetails', 1, 0)" style="cursor: pointer;"
                                :class="{'minus-number':String(scope.row['ysFallNum']).replace('%','')<0, 'positive-number': String(scope.row['ysFallNum']).replace('%','')>=0}">
                                {{scope.row['ysFallNum']}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="城区百分比进步率" width="80" prop="ysProgressRate" :key="9" align="right" header-align="center">
                        <template #header="scope">                                                                
                            <div @click="defaultSort1 = (defaultSort1=='null' ? true : !defaultSort1)" class="pointer-btn">
                                <!-- <prompt-message tipType="middle" :scope="scope" :dataList="dataList" :middle="c.abProp+'Middle'" :many="c.abProp+'Many'"> -->
                                    <!-- <span slot="columnName"> -->
                                        <span>{{scope.column.label}}</span>
                                        <span class="caret-wrapper">
                                            <!-- 升序 -->
                                            <i class="sort-caret ascending" :class="{'default-sort': (defaultSort1 && defaultSort1 !='null')}"></i>
                                            <!-- 降序 -->
                                            <i class="sort-caret descending" :class="{'default-sort': !defaultSort1 && defaultSort1 != 'null'}"></i>
                                        </span>
                                    <!-- </span>  -->
                                <!-- </prompt-message> -->
                            </div>                               
                        </template> 
                    </el-table-column>
                    <el-table-column label="城区百分比退步率" width="80" prop="ysFallRate" :key="10" align="right" header-align="center" :sort-orders="['ascending', 'descending']" sortable="column"></el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>
<script setup >
import {sort} from '@/utils/helper';
import { computed, getCurrentInstance, nextTick, onMounted, reactive, ref, watch } from 'vue';
let props = defineProps({
    dataList: Object,
    searchForm: Object,
    searchForms1: Object,
});
const instance = getCurrentInstance();
let searchForms= reactive({});
let columnList= reactive([]);
let defaultSort= ref(true);//默认表格排序
let defaultSort1= ref(true);//默认表格排序
const emit = defineEmits(['toStuComDetails','classTo1']);
onMounted(()=>{
    searchForms = props.searchForm;
    getColumnList();
});
let isGao3 = computed(()=>{ return props.searchForms1.grade == 17;});
let isGao2 = computed(()=>{ return props.searchForms1.grade == 14;});
let isGao1 = computed(()=>{ return props.searchForms1.grade == 11;});
watch(()=>searchForms.grades,(val)=>{
    initPage();     
},{deep: true});
watch(()=>searchForms.subjectId,(newVal, oldVal)=>{
    if(newVal!=oldVal){
        initPage();
    }  
},{deep: true});
watch(()=>props.searchForms1,(val)=>{
    initPage();
},{deep: true});
watch([defaultSort, defaultSort1], (newVal, oldVal)=>{
    if(newVal == 'null'){//排序不是默认的，要把默认排序清空
        return false;
    }
    handlerDefaultSort();
})
 /**
 * 合计行 事件 样式
 */
let initSumDom=()=>{
    // let this_ = this;
    let table = document.querySelector('.table1 .el-table__footer-wrapper>table');
    nextTick(()=>{
        // table.rows[0].cells[4].onclick = function(e){
        //     debugger
        //     this_.totalClick(e);
        // };
        if(!isGao3){
            table.rows[0].cells[5].innerHTML = getSumHtml();
        }
    })
};
let getSumHtml=()=>{
    let gradeList = props.dataList['analyList'] && props.dataList['analyList']['gradeList']&&props.dataList['analyList']['gradeList'][0];
    let str = '';
    str = `<div class="cell"> <el-popover teleported trigger="click" popper-class="row_popover">
                <span slot="reference" style="cursor: pointer;" :class="{'minus-number':String(${gradeList['ysAvg']}).replace('%','')<0, 'positive-number': String(${gradeList['ysAvg']}).replace('%','')>=0}">${gradeList['ysAvg']}</span>
                <div>
                    <ul class="name-tip">
                        <li class="r-name"><span class="nine-line-title">${gradeList['className']}</span>：<span class="line-header-title">平均分</span></li>
                        
                        
                    </ul>
                </div>
            </el-popover></div>`;
    return str;
};
let initPage=()=>{
    // setTimeout(()=>{
    //     nextTick(() => {//解决固定列错位问题
    //         xkSubjectShow();
    //         setTimeout(()=>{
    //             getColumnList();
    //             if(instance.refs.table1){
    //                 instance.refs.table1.doLayout();
    //             }
    //             if(instance.refs.table2){
    //                 instance.refs.table2.doLayout();
    //             }
    //             // _this.initSumDom();
    //         }, 100)     
            
    //     });
    // }, 100)      
};
//查询 班级汇总、与上次对比时，并查询“选考科目”时
let xkSubjectShow=()=>{
    return !((props.searchForms1.queryType==1 || props.searchForms1.queryType == 4) && props.searchForms1.subjectId > 103)
};
/**
 * 清除类
 */
let clearClassName=(name)=>{
    let currentTable = document.querySelector(`.${name}`);
    var selfClassName = [];
    if(currentTable){//因为表格是循环的，所以在排序的时候，不影响 其他表格
        selfClassName = currentTable.getElementsByClassName("is-sortable");
    }else{
        selfClassName = document.getElementsByClassName("is-sortable");
    }
    var hasDescendingClassNameStt = false;
    var hasAscendingClassNameStt = false;
    for(var a =0;a<selfClassName.length;a++){
        // 清除倒序className
        hasDescendingClassNameStt = selfClassName[a].classList.contains('descending');
        if(hasDescendingClassNameStt){
            selfClassName[a].classList.remove('descending')
        }
        // 清除正序className
        hasAscendingClassNameStt = selfClassName[a].classList.contains('ascending');
        if(hasAscendingClassNameStt){
            selfClassName[a].classList.remove('ascending')
        }
    }
};
//还原默认排序
let restoreDefaultSort=()=>{
    defaultSort.value = true;
    clearClassName();
};
    /**
 * 页面渲染默认排序
 */
let handlerDefaultSort=()=>{
    if(instance.refs.table1){
        clearClassName('table1');
        instance.refs.table1.clearSort();
    }        
    let order = '';
    if(defaultSort.value){//为true则为升序
        order='ascending';
    }else{
        order ='descending';
    }
    if(props.dataList && props.dataList.analyList && props.dataList.analyList['classList'].length){
        if(props.dataList.analyList['classList'][0].hasOwnProperty('ysAvg')){//总分排名 排序
            sort(props.dataList.analyList['classList'], 'ysAvg', order=='ascending');
        }
        // this.pagenation.pageIndex = 1;
    }
    
};
    /**
 * 页面渲染默认排序
 */
let handlerDefaultSort1=()=>{
    if(instance.refs.table2){
        clearClassName('table2');
        instance.refs.table2.clearSort();
    }        
    let order = '';
    if(defaultSort1.value){//为true则为升序
        order='ascending';
    }else{
        order ='descending';
    }
    if(props.dataList && props.dataList.progressRate && props.dataList.progressRate['classList'].length){
        if(props.dataList.progressRate['classList'][0].hasOwnProperty('ysProgressRate')){//总分排名 排序
            sort(props.dataList.progressRate['classList'], 'ysProgressRate', order=='ascending');
        }
        // this.pagenation.pageIndex = 1;
    }
    
}; 
// getSummaries1(param){
//     let _this =this;   
//     const { columns, data } = param;
//     const sums = []; 
//     columns.forEach((column, index) => {
//         let property = column['property'];
//         // let len = this.dataList['analyList'].length-1;
//         let dataList = this.dataList['analyList'];
//         if(dataList[dataList.length-1] && dataList[dataList.length-1]['className'] == '年级'){
//             let analyList = this.dataList['analyList'].pop();
//             sums[index]= analyList[property];
//         }
    
//     })     
//     return sums;             
// },

/**
 * 表头排序
 */
let sortChange=(val, dataList, name, type)=>{ 
    if(val.prop != 'ysAvg' && val.prop !='ysProgressRate'){
        if(type==1){
            defaultSort.value = 'null';
        }else{
            defaultSort1.value = 'null';
        }
    }else{
        clearClassName(name);
    } 
    sort(dataList, val.prop, val.order=='ascending');
};
//求和
let getSummaries1=(param)=>{
    // nextTick(() => {//第一次加载合计行不显示问题，重新渲染一次
    //     instance.refs.table1.doLayout();
    // });
    const { columns, data } = param;
    const sums = [];
    let gradeList = props.dataList['analyList'] && props.dataList['analyList']['gradeList']&&props.dataList['analyList']['gradeList'][0];
    if(!gradeList){ return false; }
    columns.forEach((column, index) => {
        if(gradeList[column['property']] && gradeList[column['property']]!==0){
            sums.push(gradeList[column['property']]);         
        }else{
            sums.push('-');
        }       
    });               
    return sums;
};
    //求和
let getSummaries2=(param)=>{
    // nextTick(() => {//第一次加载合计行不显示问题，重新渲染一次
    //     instance.refs.table2.doLayout();
    // });
    const { columns, data } = param;
    const sums = [];
    let gradeList = props.dataList['progressRate'] && props.dataList['progressRate']['gradeList']&&props.dataList['progressRate']['gradeList'][0];
    if(!gradeList){ return false; }
    columns.forEach((column, index) => {
        if(gradeList[column['property']] && gradeList[column['property']]!==0){
            sums.push(gradeList[column['property']]);         
        }else{
            sums.push('-');
        }
    });               
    return sums;
};
let getColumnList=()=>{
    //指标对比分析
    columnList = [];
    defaultSort.value = true;
    defaultSort1.value = true;
    clearClassName();
    handlerDefaultSort(); //默认排序A-B
    if(searchForms.grades=='a17'){
        columnList = [//2精华  
            {
                label: '原始分',
                list: [
                    {label: '平均分差值', prop: 'ysAvg',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 100},
                    {label: '平均分年级排名差值', prop: 'ysAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 110},
                    {label: '城区位次差值', prop: 'ysAreaWc',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 70},
                    {label: '城区百分比差值', prop: 'ysAreaBfb',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 80},
                    {label: '偏差差值', prop: 'yspc',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 92},
                    {label: '精华-贡献值增加值', prop: 'ysgxz2',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true, width: 100},         
                    {label: '城区-贡献值增加值', prop: 'ysgxz',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true, width: 100},                        
                ]
            },
            {
                label: '等级分',
                list: [
                    {label: '上台阶率差值', prop: 'djfStepRate',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 110},
                    {label: '平均分差值', prop: 'djfAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
                    {label: '平均分年级排名差值', prop: 'djfAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
                    {label: '城区位次差值', prop: 'djfAvgWc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: xkSubjectShow(), width: 70},
                    {label: '城区百分比差值', prop: 'djfAvgBfb',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: xkSubjectShow(), width: 80},
                ]
            }
        ]
    }else if(searchForms.grades=='a14'){//高二
        columnList = [
            {
                label: '原始分',
                list: [
                    {label: '平均分差值', prop: 'ysAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},

                    {label: '平均分年级排名差值', prop: 'ysAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                    {label: '城区位次差值', prop: 'ysAreaWc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                    {label: '城区百分比差值', prop: 'ysAreaBfb',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                    {label: '偏差差值', prop: 'yspc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},    
                    {label: '贡献值增加值', prop: 'ysgxz',sortable: 'column',sortOrder: ['ascending', 'descending']}, 
                    
                ]
            },
            {
                label: '等级分',
                list: [
                    {label: '平均分差值', prop: 'djfAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 110},
                    {label: '平均分年级排名差值', prop: 'djfAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
                ]
            }
        ];
    }else if(searchForms.grades=='a11'){//高一
        columnList = [
            {
                label: '原始分',
                list: [
                    {label: '贡献值增加值', prop: 'ysgxz',sortable: 'column',sortOrder: ['ascending', 'descending']}, 
                    {label: '平均分差值', prop: 'ysAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                    {label: '平均分排名差值', prop: 'ysAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                    {label: '城区位次差值', prop: 'ysAreaWc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                    {label: '贡献值差值', prop: 'gxz',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                    {label: '人均贡献值差值', prop: 'rjgxz',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},    
                    {label: '标准分差值', prop: 'bzf',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
                ]
            },
            {
                label: '等级分',
                list: [
                    {label: '平均分差值', prop: 'djfAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 110},
                    {label: '平均分年级排名差值', prop: 'djfAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
                ]
            }
        ];
    }
};
//班级看板（行政班）
let toClassKanban=(row)=>{
    let params = {
        className:row.className,
        classId:row.classId,//班级ID
        isScoreType: props.dataList['grade'] == 17, //分数类型 0原始分 1等级分   高三才有等级分，其他默认原始分
        scoreType: searchForms.scoreType,//0原始分 1等级分
        yearly: props.searchForm.yearly,
        testId: props.dataList['testIdA'],
        testIdA: props.dataList['testIdA'],//考试批次ID
        testIdB: props.dataList['testIdB'],
        subjectId: row.subjectId,
        subjectName: row.subjectName,
        grade: props.searchForm.grade,//年级
        classType: row.classType,//classType: 0行政班；1教学班；
    }
    emit('classTo1', params);
};
/**
 * 学生对比详情
 * @param routerName 跳转路由的名字
 * @param progressType,//0进步 1退步
 * @param teacherType 1教师成绩分析 false默认
 * @param scoreType 0原始分 1等级分
 * */
let stuComDetails=(row, routerName, progressType, scoreType)=>{
    let params = {
        subjectName: row.subjectName,
        className: row.className,
        testName: searchForms.testName,
        teacherType: false,
        progressType: progressType,
        scoreType: scoreType,

        testIdA: props.dataList.testIdA,
        testIdB: props.dataList.testIdB,
        routerName: routerName,
        grade: props.dataList.grade,
        yearly: searchForms.yearly,
        classId: row.classId,
        subjectId: searchForms.subjectId,
        noIncludelackTest: props.dataList.noIncludelackTest,
        dataRange: searchForms.dataRange,
    };
    emit('toStuComDetails', params);
};
// export default {
//     name: 'compareLast4',//查询维度-与上次对比 
//     props: {
//         dataList: Object,
//         searchForm: Object,
//         searchForms1: Object,
//     },
//     data(){
//         return {
//             sort: sort,
//             searchForms: {},
//             columnList: [],
//             defaultSort: true,//默认表格排序
//             defaultSort1: true,//默认表格排序
//         }
//     },
//     mounted(){
//         this.searchForms = this.searchForm;
//         this.getColumnList();
//     },
//     computed:{
//         isGao3(){
//             return this.searchForms1.grade == 17;
//         },
//         isGao2(){
//             return this.searchForms1.grade == 14;
//         },
//         isGao1(){
//             return this.searchForms1.grade == 11;
//         },       
//     },
//     watch: {
//         'searchForms.grades':{
//             handler: function(val){
//                 this.initPage();         
//             },
//             deep: true
//         },
//         'searchForms.subjectId': {
//             handler: function(newVal, oldVal){
//                 if(newVal!=oldVal){
//                     this.initPage();
//                 }
//             },
//             deep: true
//         },
//         'searchForms1':{
//             handler: function(val){
//                 this.initPage();
//             },
//             deep: true
//         },
//         // 'dataList':{
//         //     handler: function(val){
//         //         this.initPage();
//         //     },
//         //     deep: true
//         // },
//         'defaultSort': function(newVal, oldVal){
//             if(newVal == 'null'){//排序不是默认的，要把默认排序清空
//                 return false;
//             }
//             this.handlerDefaultSort();
//         },
//         'defaultSort1': function(newVal, oldVal){
//             if(newVal == 'null'){//排序不是默认的，要把默认排序清空
//                 return false;
//             }
//             this.handlerDefaultSort1();
//         },
//     },
//     methods: {
//       /*   cellStyle({row, column, rowIndex, columnIndex}){
//             if(rowIndex ===  this.dataList['analyList'].length-1){ //指定坐标rowIndex ：行，columnIndex ：列
//                 return 'background:#F5F7FA' //rgb(105,0,7)
//             }else{
//                 return ''
//             }
//         },
//         cellStyle2({row, column, rowIndex, columnIndex}){
//             if(rowIndex ===  this.dataList['progressRate'].length-1){ //指定坐标rowIndex ：行，columnIndex ：列
//                 return 'background:#F5F7FA' //rgb(105,0,7)
//             }else{
//                 return ''
//             }
//         }, */
//         //合计行 点击
//         totalClick(e){

//         },
//         /**
//          * 合计行 事件 样式
//          */
//         initSumDom(){
//             let this_ = this;
//             let table = document.querySelector('.table1 .el-table__footer-wrapper>table');
//             this.$nextTick(()=>{
//                 // table.rows[0].cells[4].onclick = function(e){
//                 //     debugger
//                 //     this_.totalClick(e);
//                 // };
//                 if(!this_.isGao3){
//                     table.rows[0].cells[5].innerHTML = this.getSumHtml();
//                 }
//             })
//         },
//         getSumHtml(){
//             let gradeList = this.dataList['analyList'] && this.dataList['analyList']['gradeList']&&this.dataList['analyList']['gradeList'][0];
//             let str = '';
//             str = `<div class="cell"> <el-popover teleported trigger="click" popper-class="row_popover">
//                         <span slot="reference" style="cursor: pointer;" :class="{'minus-number':String(${gradeList['ysAvg']}).replace('%','')<0, 'positive-number': String(${gradeList['ysAvg']}).replace('%','')>=0}">${gradeList['ysAvg']}</span>
//                         <div>
//                             <ul class="name-tip">
//                                 <li class="r-name"><span class="nine-line-title">${gradeList['className']}</span>：<span class="line-header-title">平均分</span></li>
                               
                               
//                             </ul>
//                         </div>
//                     </el-popover></div>`;
//             return str;
//         },
//         initPage(){
//             let _this = this;
//             setTimeout(()=>{
//                 _this.$nextTick(() => {//解决固定列错位问题
//                     _this.xkSubjectShow();
//                     setTimeout(()=>{
//                         _this.getColumnList();
//                         if(_this.$refs.table1){
//                             _this.$refs.table1.doLayout();
//                         }
//                         if(_this.$refs.table2){
//                             _this.$refs.table2.doLayout();
//                         }
//                         // _this.initSumDom();
//                     }, 100)     
                    
//                 });
//             }, 100)      
//         },
//         //查询 班级汇总、与上次对比时，并查询“选考科目”时
//         xkSubjectShow(){
//             return !((this.searchForms1.queryType==1 || this.searchForms1.queryType == 4) && this.searchForms1.subjectId > 103)
//         },
//         /**
//          * 清除类
//          */
//         clearClassName(name){
//             let currentTable = document.querySelector(`.${name}`);
//             var selfClassName = [];
//             if(currentTable){//因为表格是循环的，所以在排序的时候，不影响 其他表格
//                 selfClassName = currentTable.getElementsByClassName("is-sortable");
//             }else{
//                 selfClassName = document.getElementsByClassName("is-sortable");
//             }
//             var hasDescendingClassNameStt = false;
//             var hasAscendingClassNameStt = false;
//             for(var a =0;a<selfClassName.length;a++){
//                 // 清除倒序className
//                 hasDescendingClassNameStt = selfClassName[a].classList.contains('descending');
//                 if(hasDescendingClassNameStt){
//                     selfClassName[a].classList.remove('descending')
//                 }
//                 // 清除正序className
//                 hasAscendingClassNameStt = selfClassName[a].classList.contains('ascending');
//                 if(hasAscendingClassNameStt){
//                     selfClassName[a].classList.remove('ascending')
//                 }
//             }
//         },
//         //还原默认排序
//         restoreDefaultSort(){
//             this.defaultSort = true;
//             this.clearClassName();
//         },
//          /**
//          * 页面渲染默认排序
//          */
//         handlerDefaultSort(){
//             if(this.$refs.table1){
//                 this.clearClassName('table1');
//                 this.$refs.table1.clearSort();
//             }        
//             let order = '';
//             if(this.defaultSort){//为true则为升序
//                 order='ascending';
//             }else{
//                 order ='descending';
//             }
//             if(this.dataList && this.dataList.analyList && this.dataList.analyList['classList'].length){
//                 if(this.dataList.analyList['classList'][0].hasOwnProperty('ysAvg')){//总分排名 排序
//                     this.sort(this.dataList.analyList['classList'], 'ysAvg', order=='ascending');
//                 }
//                 // this.pagenation.pageIndex = 1;
//             }
            
//         },  
//          /**
//          * 页面渲染默认排序
//          */
//         handlerDefaultSort1(){
//             if(this.$refs.table2){
//                 this.clearClassName('table2');
//                 this.$refs.table2.clearSort();
//             }        
//             let order = '';
//             if(this.defaultSort1){//为true则为升序
//                 order='ascending';
//             }else{
//                 order ='descending';
//             }
//             if(this.dataList && this.dataList.progressRate && this.dataList.progressRate['classList'].length){
//                 if(this.dataList.progressRate['classList'][0].hasOwnProperty('ysProgressRate')){//总分排名 排序
//                     this.sort(this.dataList.progressRate['classList'], 'ysProgressRate', order=='ascending');
//                 }
//                 // this.pagenation.pageIndex = 1;
//             }
            
//         },  
//         // getSummaries1(param){
//         //     let _this =this;   
//         //     const { columns, data } = param;
//         //     const sums = []; 
//         //     columns.forEach((column, index) => {
//         //         let property = column['property'];
//         //         // let len = this.dataList['analyList'].length-1;
//         //         let dataList = this.dataList['analyList'];
//         //         if(dataList[dataList.length-1] && dataList[dataList.length-1]['className'] == '年级'){
//         //             let analyList = this.dataList['analyList'].pop();
//         //             sums[index]= analyList[property];
//         //         }
            
//         //     })     
//         //     return sums;             
//         // },
       
//         /**
//          * 表头排序
//          */
//         sortChange(val, dataList, name, type){ 
//             if(val.prop != 'ysAvg' && val.prop !='ysProgressRate'){
//                 if(type==1){
//                     this.defaultSort = 'null';
//                 }else{
//                     this.defaultSort1 = 'null';
//                 }
//             }else{
//                 this.clearClassName(name);
//             } 
//             this.sort(dataList, val.prop, val.order=='ascending');
//         },
//         //求和
//         getSummaries1(param){
//             let _this =this;            
//             this.$nextTick(() => {//第一次加载合计行不显示问题，重新渲染一次
//                 _this.$refs.table1.doLayout();
//             });
//             const { columns, data } = param;
//             const sums = [];
//             let gradeList = this.dataList['analyList'] && this.dataList['analyList']['gradeList']&&this.dataList['analyList']['gradeList'][0];
//             if(!gradeList){ return false; }
//             columns.forEach((column, index) => {
//                 if(gradeList[column['property']] && gradeList[column['property']]!==0){
//                     sums.push(gradeList[column['property']]);         
//                 }else{
//                     sums.push('-');
//                 }       
//             });               
//             return sums;
//         },
//          //求和
//         getSummaries2(param){
//             let _this =this;            
//             this.$nextTick(() => {//第一次加载合计行不显示问题，重新渲染一次
//                 _this.$refs.table2.doLayout();
//             });
//             const { columns, data } = param;
//             const sums = [];
//             let gradeList = this.dataList['progressRate'] && this.dataList['progressRate']['gradeList']&&this.dataList['progressRate']['gradeList'][0];
//             if(!gradeList){ return false; }
//             columns.forEach((column, index) => {
//                 if(gradeList[column['property']] && gradeList[column['property']]!==0){
//                     sums.push(gradeList[column['property']]);         
//                 }else{
//                     sums.push('-');
//                 }
//             });               
//             return sums;
//         },
//         getColumnList(){
//             //指标对比分析
//             this.columnList = [];
//             this.defaultSort = true;
//             this.defaultSort1 = true;
//             this.clearClassName();
//             this.handlerDefaultSort(); //默认排序A-B
//             if(this.searchForms.grades=='a17'){
//                 this.columnList = [//2精华  
//                     {
//                         label: '原始分',
//                         list: [
//                             {label: '平均分差值', prop: 'ysAvg',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 100},
//                             {label: '平均分年级排名差值', prop: 'ysAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 110},
//                             {label: '城区位次差值', prop: 'ysAreaWc',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 70},
//                             {label: '城区百分比差值', prop: 'ysAreaBfb',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 80},
//                             {label: '偏差差值', prop: 'yspc',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true,color: true, width: 92},
//                             {label: '精华-贡献值增加值', prop: 'ysgxz2',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true, width: 100},         
//                             {label: '城区-贡献值增加值', prop: 'ysgxz',sortable: 'column',sortOrder: ['ascending', 'descending'], isShow: true, width: 100},                        
//                         ]
//                     },
//                     {
//                         label: '等级分',
//                         list: [
//                             {label: '上台阶率差值', prop: 'djfStepRate',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 110},
//                             {label: '平均分差值', prop: 'djfAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
//                             {label: '平均分年级排名差值', prop: 'djfAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
//                             {label: '城区位次差值', prop: 'djfAvgWc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: this.xkSubjectShow(), width: 70},
//                             {label: '城区百分比差值', prop: 'djfAvgBfb',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: this.xkSubjectShow(), width: 80},
//                         ]
//                     }
//                 ]
//             }else if(this.searchForms.grades=='a14'){//高二
//                 this.columnList = [
//                     {
//                         label: '原始分',
//                         list: [
//                             {label: '平均分差值', prop: 'ysAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},

//                             {label: '平均分年级排名差值', prop: 'ysAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                             {label: '城区位次差值', prop: 'ysAreaWc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                             {label: '城区百分比差值', prop: 'ysAreaBfb',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                             {label: '偏差差值', prop: 'yspc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},    
//                             {label: '贡献值增加值', prop: 'ysgxz',sortable: 'column',sortOrder: ['ascending', 'descending']}, 
                            
//                         ]
//                     },
//                     {
//                         label: '等级分',
//                         list: [
//                             {label: '平均分差值', prop: 'djfAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 110},
//                             {label: '平均分年级排名差值', prop: 'djfAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
//                         ]
//                     }
//                 ];
//             }else if(this.searchForms.grades=='a11'){//高一
//                 this.columnList = [
//                     {
//                         label: '原始分',
//                         list: [
//                             {label: '贡献值增加值', prop: 'ysgxz',sortable: 'column',sortOrder: ['ascending', 'descending']}, 
//                             {label: '平均分差值', prop: 'ysAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                             {label: '平均分排名差值', prop: 'ysAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                             {label: '城区位次差值', prop: 'ysAreaWc',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                             {label: '贡献值差值', prop: 'gxz',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                             {label: '人均贡献值差值', prop: 'rjgxz',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},    
//                             {label: '标准分差值', prop: 'bzf',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true},
//                         ]
//                     },
//                     {
//                         label: '等级分',
//                         list: [
//                             {label: '平均分差值', prop: 'djfAvg',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 110},
//                             {label: '平均分年级排名差值', prop: 'djfAvgGrade',sortable: 'column',sortOrder: ['ascending', 'descending'],color: true, isShow: true, width: 100},
//                         ]
//                     }
//                 ];
//             }
//         },
//         //班级看板（行政班）
//         toClassKanban(row){
//             let params = {
//                 className:row.className,
//                 classId:row.classId,//班级ID
//                 isScoreType: this.dataList['grade'] == 17, //分数类型 0原始分 1等级分   高三才有等级分，其他默认原始分
//                 scoreType: this.searchForms.scoreType,//0原始分 1等级分
//                 yearly: this.searchForm.yearly,
//                 testId: this.dataList['testIdA'],
//                 testIdA: this.dataList['testIdA'],//考试批次ID
//                 testIdB: this.dataList['testIdB'],
//                 subjectId: row.subjectId,
//                 subjectName: row.subjectName,
//                 grade: this.searchForm.grade,//年级
//                 classType: row.classType,//classType: 0行政班；1教学班；
//             }
//             this.$emit('classTo1', params);
//         },
//         /**
//          * 学生对比详情
//          * @param routerName 跳转路由的名字
//          * @param progressType,//0进步 1退步
//          * @param teacherType 1教师成绩分析 false默认
//          * @param scoreType 0原始分 1等级分
//          * */
//         stuComDetails(row, routerName, progressType, scoreType){
//             let params = {
//                 subjectName: row.subjectName,
//                 className: row.className,
//                 testName: this.searchForms.testName,
//                 teacherType: false,
//                 progressType: progressType,
//                 scoreType: scoreType,

//                 testIdA: this.dataList.testIdA,
//                 testIdB: this.dataList.testIdB,
//                 routerName: routerName,
//                 grade: this.dataList.grade,
//                 yearly: this.searchForms.yearly,
//                 classId: row.classId,
//                 subjectId: this.searchForms.subjectId,
//                 noIncludelackTest: this.dataList.noIncludelackTest,
//                 dataRange: this.searchForms.dataRange,
//             };
//             this.$emit('toStuComDetails', params);
//         }
//     }
// }
</script>
<style lang="scss" scoped>
.conta_main{
    h4{
        margin-top: 20px;
    }
    .score_tag{
        font-size: 14px;
        color: #02a7f0;
        margin-left: 20px;
    }
    /* 负数 */
    .minus-number{
        color: red;
    }
    .positive-number{
        color: #409EFF;
    }   
}
</style>